<custom-style>
  <style>

html {
	--lumo-font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
	--lumo-border-radius: 0px;
	--lumo-size-xl: 2.5rem;
	--lumo-size-l: 2rem;
	--lumo-size-m: 1.75rem;
	--lumo-size-s: 1.5rem;
	--lumo-size-xs: 1.25rem;
	--lumo-space-xl: 1.75rem;
	--lumo-space-l: 1.125rem;
	--lumo-space-m: 0.5rem;
	--lumo-space-s: 0.25rem;
	--lumo-space-xs: 0.125rem;
	--lumo-line-height-m: 1.4;
	--lumo-line-height-s: 1.2;
	--lumo-line-height-xs: 1.1;
	--lumo-font-size: 1rem;
	--lumo-font-size-xxxl: 1.75rem;
	--lumo-font-size-xxl: 1.375rem;
	--lumo-font-size-xl: 1.125rem;
	--lumo-font-size-l: 1rem;
	--lumo-font-size-m: 0.875rem;
	--lumo-font-size-s: 0.8125rem;
	--lumo-font-size-xs: 0.75rem;
	--lumo-font-size-xxs: 0.6875rem;
}

[theme~="dark"] {
	--lumo-base-color: #222430;
	--lumo-primary-text-color: #00A0E3;
	--lumo-primary-color-50pct: rgba(0, 160, 227, 0.5);
	--lumo-primary-color-10pct: rgba(0, 160, 227, 0.1);
	--lumo-primary-color: #00A0E3;
	--lumo-error-text-color: rgb(255, 170, 170);
	--lumo-error-color-50pct: rgba(255, 170, 170, 0.5);
	--lumo-error-color-10pct: rgba(255, 170, 170, 0.1);
	--lumo-error-color: #faa;
}

.header {
	background-color: #191520;
	padding: var(--lumo-space-s);
}

.background-theme {
	background-image: url('../images/theme.jpg');
	background-size: contain;
	background-position: center bottom;
	background-repeat: no-repeat;
}

.box {
	margin: var(--lumo-space-l);
	padding: var(--lumo-space-l);
	background: var(--lumo-base-color) linear-gradient(var(--lumo-contrast-5pct), var(--lumo-contrast-5pct));
	border-radius: var(--lumo-border-radius);
    box-shadow: 0 0 0 1px var(--lumo-contrast-10pct), var(--lumo-box-shadow-l);
}

.error {
	color: #faa
}

  </style>
</custom-style>
